<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="./../plantilla/plantillaGeneral.xhtml">

	<ui:define name="content">
		<h:form id="form">
			<p:tabView>
				<!--PESTAÑA ADMINISTRACION  -->
				<p:tab title="#{general.administracion} #{general.cliente}">

					<!--MENSAJES  -->
					<p:growl id="menTec" life="#{general.tiempoMen}" />

					<!--ACORDEON  -->
					<p:accordionPanel effect="bounceslide" autoHeight="false" id="acoPanTec"  >
						<!--PRIMERA PESTAÑA DEL ACORDEON: INGRESAR DATOS-->
						<p:tab title="#{general.insertar} #{general.cliente}">
							<!--BARRA GUARDAR-->
							<p:toolbar>
								<p:toolbarGroup align="right">
									<p:commandButton value="#{general.guardar}" title="#{general.guardar} #{general.cliente}"
										update="menTec,griCli, dtTec, gridDatTec" 
										actionListener="#{clienteBean.guardarCliente}" />
								</p:toolbarGroup>
							</p:toolbar>
							<!--DATOS-->
									<h:panelGrid columns="2" id="griCli">
                                        <h:outputLabel id="outIdCliente" for="inpIdCliente" value="#{general.cedula} /#{general.ruc}: " styleClass="texto_negrita_derecha" />
                                                <p:inputText id="inpIdCliente" value="#{clienteBean.cliente.cedula}"  
                                                             validatorMessage="#{general.msgTamanoCedIncorr}" >
                                                  <f:validateLength for="inpIdCliente" minimum="10" maximum="13"/>
                                                </p:inputText>
                                                <h:outputText id="outCliNombre" value="#{general.nombre}: " styleClass="texto_negrita_derecha"/>
                                                <p:inputText id="inpCliNombre" value="#{clienteBean.cliente.nombre}"  size="60" required="true" requiredMessage="#{general.mensajeRequeridoNombre}"
                                                             validatorMessage="#{general.msgLongMaxCam} #{general.nombre} es de 100 #{general.caracteres}">
                                                </p:inputText>
                                                <h:outputText id="outCliApe" value="#{general.apellido}: " styleClass="texto_negrita_derecha"/>
                                                <p:inputText id="inpCliApe" value="#{clienteBean.cliente.apellido}"  size="60" 
                                                             validatorMessage="#{general.msgLongMaxCam} #{general.apellido} es de 50 #{general.caracteres}">
                                                    <f:validateLength maximum="50"/> 
                                                </p:inputText>
                                                <h:outputText id="outCliTelCon" value="#{general.telConv}: " styleClass="texto_negrita_derecha"/>
                                                <p:inputText id="inpCliTelCon" value="#{clienteBean.cliente.telefono}" 
                                                             validatorMessage="#{general.msgLongMaxCam} #{general.telConv} es de 50 #{general.caracteres}">
                                                        <f:validateLength maximum="50"/>
                                                </p:inputText>
                                                <h:outputText id="outClimail" value="#{general.email}: " styleClass="texto_negrita_derecha"/>
                                                <p:inputText id="inpClimail" value="#{clienteBean.cliente.mail}" required="false"
                                                             validatorMessage="#{general.campo} #{general.email} #{general.Incorrecto}">
                                                    <f:validateRegex pattern="[0-9a-zA-Z](\w)*(.\w)*(\\w)*@[a-zA-Z0-9]*(.[a-zA-Z]{2,9})(.[a-zA-Z]{2,9})|^$"/>
                                                </p:inputText>

                                                <h:outputText id="outCliInst" value="#{general.institucion}: " styleClass="texto_negrita_derecha"/>
								<h:selectOneMenu id="cmbInstCli" 
									value="#{clienteBean.idInst}">
									<f:selectItem itemLabel="#{general.seleccionar} #{general.institucion}"  />
									<f:selectItems value="#{clienteBean.listaInstitucionSel}"
										var="inst" itemLabel="#{inst.nombre}"
										itemValue="#{inst.idInstitucion}" />
									<p:ajax event="change" process="cmbInstCli"
										listener="#{clienteBean.cargarInstitucion}"></p:ajax>
								</h:selectOneMenu>
                            </h:panelGrid>
						</p:tab>
						<!--SEGUNDA PESTAÑA DEL ACORDEON: EDITAR DATOS-->
						<p:tab title="#{general.listaDe} #{general.cliente}">
							<!--BARRA EXPORTAR IMPRIMIR-->
							<p:toolbar>
								<p:toolbarGroup align="right">
									<h:commandButton value="#{general.modificar}" title="#{general.modificar}"
										image="/img/iconoEditar.png" styleClass="botonMat">
										<p:ajax update="form:gridDatTec, menTec, acoPanTec"
											listener="#{clienteBean.editarCliente}" />
									</h:commandButton>
									<h:commandButton value="#{general.eliminar}" title="#{general.eliminar}"
										image="/img/iconoEliminar.png" styleClass="botonMat"
										onclick="diaConMatTec.show();return false;" type="button"/>
									<p:divider />
									<h:commandLink immediate="true"
										title="#{general.exportar} #{general.excel}">
										<p:graphicImage value="/img/iconoExcel.png" 
											styleClass="botonMat"/>
										<p:dataExporter type="xls" target="dttCli"
											fileName="listaClientes" />
									</h:commandLink>
									<h:commandLink immediate="true"
										title="#{general.exportar} #{general.pdf}">
										<p:graphicImage value="/img/iconoPdf.png" 
											styleClass="botonMat"/>
										<p:dataExporter type="pdf" target="dttCli"
											fileName="listaClientes" />
									</h:commandLink>
									<h:commandLink immediate="true"
										title="#{general.exportar} #{general.xml}">
										<p:graphicImage value="/img/iconoXml.png" 
											styleClass="botonMat"/>
										<p:dataExporter type="xml" target="dttCli"
											fileName="listaClientes" />
									</h:commandLink>
								</p:toolbarGroup>
							</p:toolbar>
							<br />
								<p:dataTable id="dtTec" var="item"
									value="#{clienteBean.listaCliente}"
									selection="${clienteBean.clienteSel}" selectionMode="single"
									rowSelectListener="#{clienteBean.onRowSelect}" paginator="true"
									rows="10">
									<f:facet name="header">
										<h:panelGrid columns="1">
											<h:outputText id="outHeadCli"
												value="#{general.buscar} #{general.cliente}" />
										</h:panelGrid>
									</f:facet>
									<p:column filterBy="#{item.cedula}">
										<f:facet name="header">
											<h:outputText value="#{general.cedula}" />
										</f:facet>
										<h:outputText value="#{item.cedula}" />
									</p:column>
									<p:column style="width: 250px" sortBy="${item.nombre}" filterBy="${item.nombre}">
										<f:facet name="header">
											<h:outputText value="#{general.nombre}" />
										</f:facet>
										<h:outputText value="#{item.nombre}" style="width:inherit" />
									</p:column>
									<p:column style="width: 150px" sortBy="${item.apellido}" filterBy="${item.apellido}">
										<f:facet name="header">
											<h:outputText value="#{general.apellido}" />
										</f:facet>
										<h:outputText value="#{item.apellido}" />
									</p:column>
									<p:column style="width: 100px">
										<f:facet name="header">
											<h:outputText value="#{general.telConv}" />
										</f:facet>
										<h:outputText value="#{item.telefono}" />
									</p:column>
									<p:column>
										<f:facet name="header">
											<h:outputText value="#{general.email}" />
										</f:facet>
										<h:outputText value="#{item.mail}" />
									</p:column>
									<p:column>
										<f:facet name="header">
											<h:outputText value="#{general.institucion}" />
										</f:facet>
										<h:outputText value="#{item.institucion.nombre}" />
									</p:column>
							
								</p:dataTable>
							</p:tab>
					</p:accordionPanel>
				</p:tab>
			</p:tabView>
			<p:confirmDialog modal="true"
			message="#{general.eliminar}" 
			hideEffect="explode" header="#{general.eliminar} #{general.cliente}" severity="alert"
			widgetVar="diaConMatTec">
			<p:commandButton value="Si" oncomplete="diaConMatTec.hide()"
				actionListener="#{clienteBean.eliminarCliente}"
				update="form:dtTec, form:menTec" immediate="true">
			</p:commandButton>
			<p:commandButton value="No" onclick="diaConMatTec.hide()"
				type="button" />
		</p:confirmDialog>
		</h:form>
	</ui:define>
	
	<!-- <ui:define name="diaGen"/> -->		
</ui:composition>